<template>
    <el-card class="box-card" style="min-height: 200px;">
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
            <el-form-item label="话题类型" prop="topic_id">
                <el-select v-model="form.topic_id"
                    filterable
                    placeholder="请选择话题类型"
                    :loading="loading">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="标题" prop="title">
                <el-input v-model="form.title"></el-input>
            </el-form-item>
            <el-form-item label="副标题" prop="lead">
                <el-input v-model="form.lead"></el-input>
            </el-form-item>
            <!-- <el-form-item label="内容" prop="content">
                <Editor v-model="form.content" style="height: 600px;"></Editor>
            </el-form-item> -->
            <el-form-item label="内容" prop="content">
                <el-dropdown @command="handleCommand">
                    <span class="el-dropdown-link">
                        切换编辑器<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="md">MarkDown</el-dropdown-item>
                        <el-dropdown-item command="editor">富文本</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <mavon-editor v-if="eidtModal === 'md'"
                    v-model="form.content"
                    :toolbars="toolbars"
                    defaultOpen="edit"
                    ishljs
                    ref="md"
                    @change="mkChange"
                    style="min-height: 600px; width: 800px; display: inline-block;"
                    @imgAdd="$imgAdd"
                />
                <Editor v-if="eidtModal === 'editor'" v-model="form.content" style="height: 600px;"></Editor>
                <!-- @imgDel="$imgDel" -->
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="small" @click.native.prevent="submitForm">立即创建</el-button>
                <el-button size="small" @click="resetForm">重 置</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script>
    import Editor from '../components/Editor'
    export default {
        props:["keys"],
        data() {
            return {
                options: [],
                loading: false,
                eidtModal: 'md', // md editor
                form: {
                    topic_id: '',
                    title: '',
                    lead: '',
                    content: '',
                    'editormd-html-code': ''
                },
                rules: {
                    topic_id: [{
                            required: true,
                            message: '话题类型不能为空',
                            trigger: 'blur'
                        }
                    ],
                    title: [{
                        required: true,
                        message: '标题不能为空',
                        trigger: 'change'
                    }, {
                            max: 33,
                            message: '长度不能大于 33 个字符',
                            trigger: 'blur'
                    }],
                    lead: [{
                            max: 63,
                            message: '长度不能大于 63 个字符',
                            trigger: 'blur'
                    }],
                    content: [{
                        required: true,
                        message: '内容不能为空',
                        trigger: 'change'
                    }],
                },
                toolbars: {
                  bold: true, // 粗体
                  italic: true, // 斜体
                  header: true, // 标题
                  underline: true, // 下划线
                  strikethrough: true, // 中划线
                  mark: true, // 标记
                  superscript: true, // 上角标
                  subscript: true, // 下角标
                  quote: true, // 引用
                  ol: true, // 有序列表
                  ul: true, // 无序列表
                  link: true, // 链接
                  imagelink: true, // 图片链接
                  code: true, // code
                  table: true, // 表格
                  fullscreen: false, // 全屏编辑
                  readmodel: false, // 沉浸式阅读
                  htmlcode: false, // 展示html源码
                  help: false, // 帮助
                  /* 1.3.5 */
                  undo: true, // 上一步
                  redo: true, // 下一步
                  trash: true, // 清空
                  save: false, // 保存（触发events中的save事件）
                  /* 1.4.2 */
                  navigation: true, // 导航目录
                  /* 2.1.8 */
                  alignleft: true, // 左对齐
                  aligncenter: true, // 居中
                  alignright: true, // 右对齐
                  /* 2.2.1 */
                  subfield: false, // 单双栏模式
                  preview: true // 预览
                },
            }
        },
        components: {
            Editor
        },
        mounted() {
            this.remoteTopics()
        },
        created() {

        },
        methods: {
            handleCommand(command) {
                this.eidtModal = command
            },
            mkChange (value, render) {
              // render 为 markdown 解析后的结果[html]
              this.$set(this.form, 'editormd-html-code', render)
            },
            $imgAdd (pos, file) {
                const _this = this
                var formData = new FormData()
                formData.append('image', file)
                const formconfig = {
                    headers: { // 添加请求头
                        'Content-Type': 'multipart/form-data',
                    }
                }
                _this.axios.post(_this.$API.ZHIHUAPI.imageUpload, formData, formconfig).then(res => {
                    res = res.data
                    // console.log(res.data)
                    if (res.code === 10000) {
                      // _this.$message.success(res.message)
                        _this.$refs.md.$img2Url(pos, res.data.url)
                    } else {
                        _this.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            resetForm() {
                this.$refs.form.resetFields()
            },
            remoteTopics() {
                this.loading = true;
                setTimeout(() => {
                    const _this = this
                    _this.axios.post(_this.$API.ZHIHUAPI.topicSelectDict).then((res) => {
                        _this.loading = false;
                        _this.options = res.data
                    }).catch(() => {
                        _this.loading = false;
                        _this.options = []
                    })
                }, 200);
            },
            submitForm() {
                const _this = this
                _this.$refs.form.validate(vaild=>{
                    if (vaild) {
                        const params = _this.form
                        params['cates'] = _this.keys
                        params['editor'] = _this.eidtModal
                        _this.axios.post(_this.$API.ZHIHUAPI.publishQuestion, _this.qs.stringify(params)).then((res) => {
                            res = res.data
                            if (res.code === 10000) {
                                _this.$message({
                                    showClose: false,
                                    message: res.message,
                                    type: 'success'
                                })
                                setTimeout(() => {
                                    if (_this.keys === 'blog') {
                                        _this.$router.push({
                                            path: "/customer/myBlogs"
                                        })
                                    } else if (_this.keys === 'discuss') {
                                        _this.$router.push({
                                            path: "/customer/myDiscuss"
                                        })
                                    } else if (_this.keys === 'link') {
                                        _this.$router.push({
                                            path: "/customer/myLink"
                                        })
                                    } else if (_this.keys === 'question') {
                                        _this.$router.push({
                                            path: "/customer/myQuestion"
                                        })
                                    } else {
                                        _this.$router.push({
                                            path: "/main"
                                        })
                                    }
                                }, 1000);
                            } else {
                                _this.$message({
                                    showClose: false,
                                    message: res.message,
                                    type: 'error'
                                })
                            }
                        }).catch(() => {
                            _this.$message({
                                showClose: false,
                                message: '网络连接失败，请重试！',
                                type: 'error'
                            })
                        })
                    }
                })
            },
        }
    }
</script>

<style scoped>
 /deep/ .editor {
  line-height: normal !important;
  height: 500px;
}
</style>
